<template>
	<div class="newActivitieCoupons" v-if="couponsCode.length>0">
		<!--滑动优惠券-->
		<div @touchstart="setstoptouch(false)" v-if="CouponsStyle==='slide'" class="Couponsslied">
			<banner style="width:100%; height: 100%; position:relative;" :bounce="true">
				<ul>
					<li v-for="(val,index) in couponsdata" :key="index" @click="mycoupons(val)">
						<div class="leftdiv" :class="useplatcolor(val.usePlatform)">
							<span>{{useterrace(val.usePlatform)}}</span>
						</div>
						<div class="rightdiv">
							<div class="bigdiv">
								<div class="namediv">
									<span class="dw" v-if="val.couponAmount">¥</span>
									<span class="money">{{pricetwo(1,val.couponAmount,val.couponDiscount)}}</span><span v-if="val.couponAmount" style="margin-top: 0.5rem;">{{pricetwo(2,val.couponAmount,val.couponDiscount)}}</span>
									<span style="margin-top: 0.5rem;" v-if="val.couponDiscount">折</span>
								</div>
								<div class="detildiv">
									<div class="until">{{val.couponName}}</div>
									<div style="line-height: 0.6rem;">
										<span class="kaquan" v-if="val.useRestriction==1" style="color: #ef5423;">满{{val.fullElement}}元使用</span>
										<span class="kaquan">{{useRangefn(val)}}</span>
									</div>
								</div>
							</div>
							<div class="bottomdiv">
								<p class="time" v-if="val.availableStartTime">有效期：{{getuseTime(val.availableStartTime)}}-{{getuseTime(val.availableEndTime)}}</p>
								<p class="time" v-if="val.validityDate">有效期：{{val.validityDate}}天</p>
								<p class="butten">{{val.state}}</p>
							</div>
							<i v-if="val.state=='已领取'" class="icon njfont nj-yilingqu statestyle"></i>
							<i v-if="val.state=='已抢完'" class="icon njfont nj-yiqiangwan statestyle"></i>
						</div>
					</li>
				</ul>
			</banner>
			<div style="clear: both;"></div>
		</div>
		<!--单个优惠券-->
		<div v-if="CouponsStyle==='one'" class="onecup" style="width: 100%;position: relative;">
			<ul class="coupon_list" style="padding-top: 0rem;" v-if="couponsdata.length>0">
				<!--:class="[{already1:val.state=='准备开抢'||val.auditorStatus==7||val.auditorStatus==4}, {use:val.state=='已领取' || val.state=='已抢完'}]"-->
				<li v-for="(val,index) in couponsdata" :key="index"  @click="mycoupons(val)">
					<dl>
						<dt class="spandt">
							<span class="usePlatspan" :class="useplatcolor(val.usePlatform)" >{{useterrace(val.usePlatform)}}</span> 
							{{val.couponName}}
						</dt>
						<dd class="spandd">{{useRangefn(val)}}</dd>
						<dd class="spandd" v-if="val.useRestriction==1">满{{val.fullElement}}元使用</dd>
						<p v-if="val.availableStartTime">有效期：{{getuseTime(val.availableStartTime)}}-{{getuseTime(val.availableEndTime)}}</p>
						<p v-if="val.validityDate">有效期：{{val.validityDate}}天</p>
					</dl>
					<div class="account_money">
						<div class="moneyclss">
							<span class="unit" v-if="val.couponAmount">¥</span>
							<span>{{pricetwo(1,val.couponAmount,val.couponDiscount)}}</span><span class="unit" v-if="val.couponAmount">{{pricetwo(2,val.couponAmount,val.couponDiscount)}}</span>
							<span class="unit" v-if="val.couponDiscount">折</span>
						</div>
						<p class="stateclss">{{val.state}}</p>
					</div>
					<i v-if="val.state=='已领取'" class="icon njfont nj-yilingqu statestyle"></i>
					<i v-if="val.state=='已抢完'" class="icon njfont nj-yiqiangwan statestyle"></i>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { mapMutations, mapGetters } from "vuex";
	import axios from "axios";
	import Banner from '../../components/BannerScroll';
	import { MessageBox } from '@/ui-components';
	import { NAVIGATE } from "../../config/postMessage-types";
	import { Toast } from "@/utils/toast.js";
	export default {
		props: {
			couponsCode: {
				type: Array,
				default: () => []
			},
			couponsid: {
				type: String,
				default: ""
			},
			copolddataobj: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				couponsdata: [],
				flageclick: true,
				//判断是否为分享的页面
				isShare: 0,
				/*可以领取的优惠券*/
				copolddata: [],
				copolddata1: [], //已领完
				copolddata2: [], //明日领
				copoldDataNotStart : [],//已发布未领取
				//接口数据
				copolddataobj1: {}
			}
		},
		components: {
			Banner
		},
		methods: {
			...mapMutations('xxy', [
				"setstoptouch"
			]),
			//截取使用时间
			getuseTime(val) {
				if(val) {
					return val.substring(5, 10).replace('-', '.');
				} else {
					return '--'
				}
			},
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item.useRange == 1) {
					if(item.preferentialRange.promotionGoodsList.length == 1) {
						return item.preferentialRange.promotionGoodsList[0].goodsName + "卡券"
					} else {
						return "商品类卡券"
					}
				} else if(item.useRange == 2 || item.useRange == 5) {
					if(item.preferentialRange.promotionClassList.length == 1) {
						return item.preferentialRange.promotionClassList[0].className + "卡券"
					} else {
						return "品类卡券"
					}
				} else if(item.useRange == 3) {
					if(item.preferentialRange.promotionBrandList.length == 1) {
						return item.preferentialRange.promotionBrandList[0].brandName + "卡券"
					} else {
						return "品牌类卡券"
					}
				} else if(item.useRange == 4) {
					return "全场卡券"
				}
			},
			//使用平台的获取
			useterrace(item) {
				if(!item) {
					return ''
				}
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return '商城专享'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return '体验中心专享'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return '商城体验中心通用'
				}
			},
			useplatcolor(item) {
				if(!item) {
					return ''
				}
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return 'usePlatspan1'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return 'usePlatspan2'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return 'usePlatspan3'
				}
			},
			//编辑环境领取优惠券数据
			queryCoupons3() {
				var sessionId = localStorage.getItem('sessionId');
				let url = api.trade_host + '/marketCenter/getDiffReleasedCoupons/' + api.enterpriseCode;
				let config = {
					url: url,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.copolddataobj1 = res.data.data[0]
				})
			},
			//首页领取优惠券
			queryCoupons(data) {
				var rescup
				if(data) {
					rescup = data
				} else {
					rescup = this.copolddataobj
				}
				var obj = rescup.canReceiveAgainList || [];
				var obj1 = rescup.noRemainderList || [];
				var obj2 = rescup.canReceiveTomorrowList || [];
				var objNotStart = rescup.waitActivityStartList  || [];//已经发布但是未开始
				for(var h = 0; h < obj.length; h++) {
					this.copolddata.push(obj[h].couponCode)
				}
				for(var k = 0; k < obj1.length; k++) {
					this.copolddata1.push(obj1[k].couponCode)
				}
				for(var g = 0; g < obj2.length; g++) {
					this.copolddata2.push(obj2[g].couponCode)
				}
				for(var j = 0; j < objNotStart.length; j++) {
					this.copoldDataNotStart.push(objNotStart[j].couponCode)
				}
				this.getcodedata()
			},
			//处理数据
			getcodedata() {
				var sessionId = localStorage.getItem('sessionId');
				this.couponsdata = []
				var arrcoupon = []
				if(this.couponsCode.length == 0) {
					return
				}
				if(this.couponsCode && this.couponsCode.length > 0) {
					for(var i = 0; i < this.couponsCode.length; i++) {
						arrcoupon.push(JSON.parse(this.couponsCode[i].extendField).coupons)
					}
					for(var j = 0; j < arrcoupon.length; j++) {
						arrcoupon[j].state = "立即领取"

						if(this.copolddata1.length > 0 && this.copolddata1.indexOf(arrcoupon[j].couponCode) > -1) {
							arrcoupon[j].state = "已抢完"
							this.couponsdata.push(arrcoupon[j])
						} else if(this.copoldDataNotStart.length > 0 && this.copoldDataNotStart.indexOf(arrcoupon[j].couponCode) > -1){
							arrcoupon[j].state = "准备开抢"
							this.couponsdata.push(arrcoupon[j])
						} else if((this.copolddata.length>0 && this.copolddata.indexOf(arrcoupon[j].couponCode) < 0 && this.copolddata2.indexOf(arrcoupon[j].couponCode) < 0) || (this.copolddata2.length>0 && this.copolddata.indexOf(arrcoupon[j].couponCode) < 0 && this.copolddata2.indexOf(arrcoupon[j].couponCode) < 0)) {
							arrcoupon[j].state = '已抢完' //"已结束"
							this.couponsdata.push(arrcoupon[j])
						} else if(this.copolddata2.length > 0 && this.copolddata2.indexOf(arrcoupon[j].couponCode) > -1) {
							arrcoupon[j].state = "已领取"
							this.couponsdata.push(arrcoupon[j])
						} else {
							this.couponsdata.push(arrcoupon[j])
						}
					}
				}
			},
			//点击领取优惠券
			mycoupons(val) {
				var sessionId = localStorage.getItem('sessionId');
				console.log('8888888', sessionId, this.isApp)
				if(!sessionId || sessionId == 'undefined') {
					if(!this.isApp) {
						Toast({
							duration: 2000,
							message: '请到app登陆后领取',
							type: "fail"
						})
					} else {
						Toast({
							duration: 2000,
							message: '请登陆后领取',
							type: "fail"
						})
						let goBackIns = {
							type: NAVIGATE,
							params: {
								screen: 'Login',
								params: {
									FromWeb: true
								}
							}
						}
						window.postMessage(JSON.stringify(goBackIns));
					}
					return
				}
				if(val.state == "已领取" || val.state == "不可领"  || val.state == "已抢完") {
					return
				}
				if(this.flageclick) {
					this.flageclick = false
					let url = window.api.trade_host + '/marketCenter/receiveCouponCodesOnline/' + val.couponCode;
					let config = {
						url: url,
						method: 'GET',
						headers: {
							'sessionId': sessionId,
						},
					};
					axios(config).then((res) => {
						this.flageclick = true
						if(res.data.returnCode == 1) {
							val.state = "已领取"
							Toast({
								duration: 2000,
								message: "恭喜领取成功",
								type: "success"
							})
						} else if(res.data.returnCode == 0) {

							Toast({
								duration: 2000,
								message: res.data.msg,
								type: "fail"
							})
							//105活动结束，106领取过不能重复领取，107今日领完明天领，108优惠券领完
							if(res.data.data[0] == 105 || res.data.data[0] == 108) {
								val.state = "已抢完"
							} else if(res.data.data[0]===103){
								Toast({
									duration: 2000,
									message: res.data.msg,
									type: "fail"
								})
							}else if(res.data.data[0] == 106 || res.data.data[0] == 107) {
								val.state = "已领取"
							} else {
								val.state = "不可领"
							}
						}
					})
				}
			},
		},
		computed: {
			CouponsStyle() {
				if(this.couponsid) {
					if(parseInt(this.getCurrentVDO(this.couponsid, this.pageName).config.couponsStyle) == 0) {
						return 'one';
					} else if(parseInt(this.getCurrentVDO(this.couponsid, this.pageName).config.couponsStyle) == 1) {
						return 'slide';
					}
				}
			},
			isApp() {
				return window.isApp;
			}
		},
		watch: {
			couponsCode(data) {
				if(data && this.env === 'edit') {
					this.queryCoupons3()
					this.queryCoupons(this.copolddataobj1)
				} else {
					this.queryCoupons()
				}
			},
			copolddataobj(data) {
				this.queryCoupons(data)
				this.copolddataobj = data
			}
		},
		mounted() {
			this.isShare = this.$route.query.share;
			this.queryCoupons()
		},
	}
</script>

<style>
	.newActivitieCoupons {}
	
	.newActivitieCoupons .Couponsslied ul {
		display: flex;
		padding: 0.5rem 0.75rem;
		float: left;
		min-width: 100%;
		position: relative;
	}
	
	.newActivitieCoupons .Couponsslied ul li {
		background-color: #fff;
		background-image: none;
		margin: 0rem 0.2rem;
		display: inline-block;
		text-align: left;
		height: 5rem;
		border-radius: 0.3rem;
		position: relative;
	}
	
	.newActivitieCoupons .Couponsslied ul li .leftdiv {
		width: 1rem;
		padding: 0rem 0.25rem;
		height: 100%;
		font-size: 0.5rem;
		display: table;
		position: absolute;
		top: 0rem;
		left: 0rem;
	}
	
	.newActivitieCoupons .Couponsslied ul li .leftdiv span {
		line-height: 0.6rem;
		vertical-align: middle;
		display: table-cell;
	}
	
	.newActivitieCoupons .Couponsslied ul li .rightdiv {
		display: inline-block;
		height: 100%;
		position: relative;
		margin-left: 1rem;
		margin-right: 0.75rem;
	}
	
	.newActivitieCoupons .Couponsslied ul li .rightdiv .bigdiv {
		margin-top: 0.75rem;
		position: relative;
		display: flex;
	}
	
	.newActivitieCoupons .Couponsslied ul li .rightdiv .namediv {
		display: flex;
		vertical-align: top;
		color: #ef5423;
		text-align: center;
		margin: 0rem 0.75rem;
	}
	
	.namediv .dw {
		vertical-align: top;
		display: inline-block;
		font-size: 0.9rem;
	}
	
	.newActivitieCoupons .namediv .money {
		font-size: 1.6rem;
		height: 1.6rem;
		display: inline-block;
		line-height: 1.6rem;
	}
	
	.newActivitieCoupons .Couponsslied ul li .rightdiv .detildiv {
		display: inline-block;
	}
	
	.Couponsslied ul li .rightdiv .detildiv .kaquan {
		font-size: 0.5rem;
		color: #777;
		display: inline-block;
		line-height: 0.6rem;
	}
	
	.newActivitieCoupons .Couponsslied ul li .rightdiv .detildiv .until {
		font-size: 0.65rem;
		color: #000;
		width: 7rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.bottomdiv {
		position: absolute;
		bottom: 0.5rem;
		width: 100%;
	}
	
	.bottomdiv .time {
		display: inline-block;
		font-size: 0.55rem;
		margin-left: 0.75rem;
	}
	
	.bottomdiv .butten {
		display: inline-block;
		color: #fff;
		background-color: #ef5423;
		padding: 0.1rem 0.3rem;
		border-radius: 1rem;
		font-size: 0.55rem;
		float: right;
	}
	/*单张优惠券样式*/
	
	.newActivitieCoupons .coupon_list li {
		background: #fff;
		border: none;
		height: 4rem;
		margin-top: 0.75rem;
		margin-bottom: 0rem;
	}
	
	.newActivitieCoupons .coupon_list li dl dt {
		font-weight: normal !important;
		padding-right: 0.2rem;
		line-height: 1rem;
		font-size: 0.7rem;
		margin-top: 0.2rem;
	}
	
	.newActivitieCoupons .coupon_list li dl {
		text-align: left;
		white-space: normal;
	}
	
	.newActivitieCoupons .coupon_list li dl p {
		font-size: 0.6rem;
		line-height: 0.6rem;
		height: 0.6rem;
		margin-bottom: 0.2rem;
	}
	
	.newActivitieCoupons .coupon_list li dl dd {
		font-size: 0.5rem;
		padding: 0.1rem 0.2rem;
		border: 1px solid #d7d7d7;
		color: #666;
	}
	
	.newActivitieCoupons .coupon_list li::after,
	.newActivitieCoupons .coupon_list li::before {
		background: none !important;
		border-left: none;
		border-bottom: none;
		border-radius: none;
	}
	
	.newActivitieCoupons .coupon_list li .account_money .unit {
		font-size: 0.8rem;
	}
	
	.newActivitieCoupons .coupon_list li .account_money {
		background: url(../../../static/image/myCoupon1.png) repeat-y right;
		background-size: contain;
		height: 4rem;
		color: #fff;
		border: none;
	}
	
	.newActivitieCoupons .coupon_list li .account_money .moneyclss {
		height: 1rem;
	}
	
	.newActivitieCoupons .coupon_list li .stateclss {
		height: 1rem;
		display: inline-block;
		color: #fff;
	}
	
	.newActivitieCoupons .coupon_list li .account_money span {
		font-size: 1.4rem;
		display: inline-block;
	}
	
	.newActivitieCoupons .coupon_list li dl dt {
		font-weight: normal !important;
		padding-right: 0.2rem;
		line-height: 1rem;
		font-size: 0.7rem;
	}
	
	.newActivitieCoupons .coupon_list li.already1,
	.newActivitieCoupons .coupon_list li.use {
		opacity: 0.5;
	}
	
	.newActivitieCoupons .coupon_list li.already1 .account_money {
		background: url(../../../static/image/myCoupon3.png) repeat-y right;
		background-size: contain;
		color: #fff;
	}
	
	.newActivitieCoupons .coupon_list li.use .account_money {
		background: url(../../../static/image/myCoupon1.png) repeat-y right;
		background-size: contain;
		color: #fff;
	}
	
	.newActivitieCoupons .coupon_list li.already1 dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
	}
	
	.newActivitieCoupons .cardoperation {
		position: fixed;
		bottom: 1rem;
		width: 100%;
		height: 2rem;
	}
	
	.newActivitieCoupons .cardoperation p {
		display: inline-block;
		background-color: #ccc;
		width: 17rem;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.8rem;
		color: #fff;
		border-radius: 0.2rem;
	}
	
	.newActivitieCoupons .onbuttern {
		background-color: #EF5423 !important;
	}
	
	.newActivitieCoupons .usePlatspan {
		display: inline-block;
		font-size: 0.6rem;
		line-height: 1rem;
		padding: 0rem 0.25rem;
		border-radius: 0.5rem;
		/*background-color: #FF9933;商城用
		background-color: #9FD959;体验中心用
		background-color: #EF5423; 商城体验中心通用*/
	}
	
	.newActivitieCoupons .usePlatspan1 {
		color: #38B035;
		background-color: rgba(56, 176, 53, 0.1);
		/*商城用*/
	}
	
	.newActivitieCoupons .usePlatspan2 {
		color: #5EC1FF;
		background-color: rgba(94, 193, 255, 0.1);
		/*体验中心用*/
	}
	
	.newActivitieCoupons .usePlatspan3 {
		color: #FF6600;
		background-color: rgba(255, 102, 0, 0.1);
		/*商城体验中心通用*/
	}
	
	.newActivitieCoupons .Couponsslied .statestyle {
		font-size: 3.5rem;
		position: absolute;
		top: 0.4rem;
		right: 0.3rem;
	}
	
	.newActivitieCoupons .onecup .statestyle {
		font-size: 3.5rem;
		position: absolute;
		top: 0.3rem;
		right: 3rem;
	}
</style>